<template>
  <div class="father">
    <h3>父组件</h3>
    零花钱：{{ money }}
    车的品牌：{{ car.brand }} ,车的价格：{{ car.price }} 元
    <Child/>
  </div>
</template>

<script setup lang="ts" name="Father">
import Child from './Child.vue';

 import {ref,reactive,provide} from 'vue'

 let money = ref(1000)

 let car   = reactive({
  brand:'路虎极光',
  price:2000000
})

function updateMoney(value:number){
  money.value -=value;
}

// 给后代提供一些支持
provide('parentContext',{money,car,updateMoney})


</script>

<style scoped>
  .father {
    background-color: rgb(165, 164, 164);
    padding: 20px;
    border-radius: 10px;
  }
</style>